<template>
    <div class="left">
        <div>财务管理</div>
        <ul>
            <li @click="roRouter('/caiding')">订单管理</li>
            <li @click="roRouter('/caiguan')">财务列表</li>
        </ul>
    </div>
    <div class="right">
        <router-view></router-view>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const roRouter = (path) => {
    router.push(path)
}

</script>

<style lang="scss" scoped>
.left {
    background-color: #313131;
    height: 100%;
    width: 130px;
    color: #ffffff;
    text-align: center;

    div {
        padding: 20px 0;
        border-bottom: 1px solid #c2c2c2;
    }

    ul {
        li {
            padding: 5px 0;

            &:hover {
                cursor: pointer;

            }
        }
    }
}

.right {
    background-color: #ffffff;
    height: 100%;
    width: calc(100% - 130px)
}</style>